
<html lang=""><head>
    <title>动画 · MINA</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.0">




    <link rel="stylesheet" href="../../gitbook/style.css">




    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">























    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="api-canvas.html">


    <link rel="prev" href="ui-navigate.html">


</head>
<body>

<div class="book with-summary">
    <div>

        <div class="sub_nav_box">
            <div class="sub_nav_inner">




                <ul class="top_sub_nav">




                    <li class="sub_nav_item " data-level="1.1" data-path="../">

                        <a href="../">


                            简易教程

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.2" data-path="../framework/MINA.html">

                        <a href="../framework/MINA.html">


                            框架

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.3" data-path="../component/">

                        <a href="../component/">


                            组件

                        </a>

                    </li>

                    <li class="sub_nav_item selected" data-level="1.4" data-path="./">

                        <a href="./">


                            API

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.5" data-path="../devtools/devtools.html">

                        <a href="../devtools/devtools.html">


                            工具

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.6" data-path="../qa/qa.html">

                        <a href="../qa/qa.html">


                            Q&amp;A

                        </a>

                    </li>




                </ul>




                <!-- <h1>动画</h1> -->
                <div id="book-search-input" role="search">
                    <form>
                        <label for="search-input" class="search-icon" id="js-search-icon"></label>
                        <input type="text" id="search-input" name="search-input" placeholder="搜索">
                        <button type="reset" class="clear-input-btn"></button>
                    </form>
                </div>
            </div>
        </div>

        <div class="book-summary">


            <nav role="navigation">





                <ul class="summary">


                    <li class="chapter  open" data-level="1.4.1" data-path="api-network.html">

                        <a href="api-network.html">


                            网络

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.1.1" data-path="network-request.html">

                                <a href="network-request.html">


                                    发起请求

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.1.2" data-path="network-file.html">

                                <a href="network-file.html">


                                    上传、下载

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.1.2.1" data-path="network-file.html">

                                        <a href="network-file.html#wxuploadfileobject">


                                            wx.uploadFile

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.2.2" data-path="network-file.html">

                                        <a href="network-file.html#wxdownloadfileobject">


                                            wx.downloadFile

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.1.3" data-path="network-socket.html">

                                <a href="network-socket.html">


                                    WebSocket

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.1.3.1" data-path="network-socket.html">

                                        <a href="network-socket.html#wxconnectsocketobject">


                                            wx.connectSocket

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.2" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketopencallback">


                                            wx.onSocketOpen

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.3" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketerrorcallback">


                                            wx.onSocketError

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.4" data-path="network-socket.html">

                                        <a href="network-socket.html#wxsendsocketmessageobject">


                                            wx.sendSocketMessage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.5" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketmessagecallback">


                                            wx.onSocketMessage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.6" data-path="network-socket.html">

                                        <a href="network-socket.html#wxclosesocket">


                                            wx.closeSocket

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.1.3.7" data-path="network-socket.html">

                                        <a href="network-socket.html#wxonsocketclosecallback">


                                            wx.onSocketClose

                                        </a>



                                    </li>


                                </ul>

                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.2" data-path="media-picture.html">

                        <a href="media-picture.html">


                            媒体

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.2.1" data-path="media-picture.html">

                                <a href="media-picture.html">


                                    图片

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.1.1" data-path="media-picture.html">

                                        <a href="media-picture.html#wxchooseimageobject">


                                            wx.chooseImage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.1.2" data-path="media-picture.html">

                                        <a href="media-picture.html#wxpreviewimageobject">


                                            wx.previewImage

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.2" data-path="media-record.html">

                                <a href="media-record.html">


                                    录音

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.2.1" data-path="media-record.html">

                                        <a href="media-record.html#wxstartrecordobject">


                                            wx.startRecord

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.2.2" data-path="media-record.html">

                                        <a href="media-record.html#wxstoprecord">


                                            wx.stopRecord

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.3" data-path="media-voice.html">

                                <a href="media-voice.html">


                                    音频播放控制

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.3.1" data-path="media-voice.html">

                                        <a href="media-voice.html#wxplayvoiceobject">


                                            wx.playVoice

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.3.2" data-path="media-voice.html">

                                        <a href="media-voice.html#wxpausevoice">


                                            wx.pauseVoice

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.3.3" data-path="media-voice.html">

                                        <a href="media-voice.html#wxstopvoice">


                                            wx.stopVoice

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.4" data-path="media-background-audio.html">

                                <a href="media-background-audio.html">


                                    音乐播放控制

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.2.4.1" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxgetbackgroundaudioplayerstateobject">


                                            wx.getBackgroundAudioPlayerState

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.2" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxplaybackgroundaudioobject">


                                            wx.playBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.3" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxpausebackgroundaudio">


                                            wx.pauseBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.4" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxseekbackgroundaudioobject">


                                            wx.seekBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.5" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxstopbackgroundaudio">


                                            wx.stopBackgroundAudio

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.6" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxonbackgroundaudioplaycallback">


                                            wx.onBackgroundAudioPlay

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.7" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxonbackgroundaudiopausecallback">


                                            wx.onBackgroundAudioPause

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.2.4.8" data-path="media-background-audio.html">

                                        <a href="media-background-audio.html#wxonbackgroundaudiostopcallback">


                                            wx.onBackgroundAudioStop

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.2.5" data-path="file.html">

                                <a href="file.html">


                                    文件

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.2.6" data-path="media-video.html">

                                <a href="media-video.html">


                                    视频

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.3" data-path="data.html">

                        <a href="data.html">


                            数据

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.3.1" data-path="data.html">

                                <a href="data.html">


                                    数据缓存

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.3.1.1" data-path="data.html">

                                        <a href="data.html#wxsetstorageobject">


                                            wx.setStorage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.2" data-path="data.html">

                                        <a href="data.html#wxsetstoragesynckeyvalue">


                                            wx.setStorageSync

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.3" data-path="data.html">

                                        <a href="data.html#wxgetstorageobject">


                                            wx.getStorage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.4" data-path="data.html">

                                        <a href="data.html#wxgetstoragesynckey">


                                            wx.getStorageSync

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.5" data-path="data.html">

                                        <a href="data.html#wxclearstorage">


                                            wx.clearStorage

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.3.1.6" data-path="data.html">

                                        <a href="data.html#wxclearstoragesync">


                                            wx.clearStorageSync

                                        </a>



                                    </li>


                                </ul>

                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.4" data-path="location.html">

                        <a href="location.html">


                            位置

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.4.1" data-path="location.html">

                                <a href="location.html#wxgetlocationobject">


                                    获取位置

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.4.2" data-path="location.html">

                                <a href="location.html#wxopenlocationobject">


                                    查看位置

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.5" data-path="device.html">

                        <a href="device.html">


                            设备

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.5.1" data-path="device.html">

                                <a href="device.html#wxgetnetworktypeobject">


                                    网络状态

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.5.2" data-path="device.html">

                                <a href="device.html#wxgetsysteminfoobject">


                                    系统信息

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.5.3" data-path="device.html">

                                <a href="device.html#wxonaccelerometerchangecallback">


                                    重力感应

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.5.4" data-path="device.html">

                                <a href="device.html#wxoncompasschangecallback">


                                    罗盘

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.6" data-path="ui.html">

                        <a href="ui.html">


                            界面

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.6.1" data-path="ui.html">

                                <a href="ui.html">


                                    设置导航条

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.6.2" data-path="ui-navigate.html">

                                <a href="ui-navigate.html">


                                    导航

                                </a>



                            </li>

                            <li class="chapter active " data-level="1.4.6.3" data-path="api-animation.html">

                                <a href="api-animation.html">


                                    动画

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.6.4" data-path="api-canvas.html">

                                <a href="api-canvas.html">


                                    绘图

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.6.5" data-path="ui-other.html">

                                <a href="ui-other.html">


                                    其他

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.4.7" data-path="api-login.html">

                        <a href="api-login.html">


                            开放接口

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.4.7.1" data-path="api-login.html">

                                <a href="api-login.html">


                                    登录

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.7.1.1" data-path="signature.html">

                                        <a href="signature.html">


                                            签名加密

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.4.7.2" data-path="open.html">

                                <a href="open.html">


                                    用户信息

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.7.3" data-path="api-pay.html">

                                <a href="api-pay.html">


                                    微信支付

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.4.7.4" data-path="notice.html">

                                <a href="notice.html">


                                    模板消息

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.4.7.4.1" data-path="notice.html">

                                        <a href="notice.html#使用说明">


                                            使用说明

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.4.7.4.2" data-path="notice.html">

                                        <a href="notice.html#接口说明">


                                            接口说明

                                        </a>



                                    </li>


                                </ul>

                            </li>


                        </ul>

                    </li>


                </ul>


            </nav>


        </div>

        <div class="book-body">

            <div class="body-inner">

                <!--                     
                
                <div class="book-header" role="navigation">
                    
                </div>
                
                
                 -->

                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    <h3 id="wxcreateanimationobject">wx.createAnimation(OBJECT)</h3><p>​    创建一个动画实例<a href="#animation">animation</a>。调用实例的方法来描述动画。最后通过动画实例的<code>export</code>方法导出动画数据传递给组件的<code>animation</code>属性。</p><p><strong>注意: <code>export</code> 方法每次调用后会清掉之前的动画操作 </strong></p><p><strong>OBJECT参数说明：</strong></p><table>
                                    <thead>
                                    <tr><th>参数</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>duration</td>
                                    <td>Integer</td>
                                    <td>否</td>
                                    <td>动画持续时间，单位ms，默认值 400</td>
                                </tr><tr><td>timingFunction</td>
                                    <td>String</td>
                                    <td>否</td>
                                    <td>定义动画的效果，默认值"linear"，有效值："linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"</td>
                                </tr><tr><td>delay</td>
                                    <td>Integer</td>
                                    <td>否</td>
                                    <td>动画持续时间，单位 ms，默认值 0</td>
                                </tr><tr><td>transformOrigin</td>
                                    <td>String</td>
                                    <td>否</td>
                                    <td>设置transform-origin，默认为"50% 50% 0"</td>
                                </tr></tbody></table>

<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> animation = wx.createAnimation({
  transformOrigin:<span class="hljs-string">"50% 50%"</span>,
  duration:<span class="hljs-number">1000</span>,
  timingFunction:<span class="hljs-string">"ease"</span>,
  delay:<span class="hljs-number">0</span>
})</code></pre>
                                    <h3 id="animation">animation</h3><p>动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。</p><p>样式：</p><table>
                                    <thead>
                                    <tr><th>方法</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>opacity</td>
                                    <td>value</td>
                                    <td>透明度，参数范围 0~1</td>
                                </tr><tr><td>backgroundColor</td>
                                    <td>color</td>
                                    <td>颜色值</td>
                                </tr><tr><td>width</td>
                                    <td>length</td>
                                    <td>长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值</td>
                                </tr><tr><td>height</td>
                                    <td>length</td>
                                    <td>长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值</td>
                                </tr><tr><td>top</td>
                                    <td>length</td>
                                    <td>长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值</td>
                                </tr><tr><td>left</td>
                                    <td>length</td>
                                    <td>长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值</td>
                                </tr><tr><td>bottom</td>
                                    <td>length</td>
                                    <td>长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值</td>
                                </tr><tr><td>right</td>
                                    <td>length</td>
                                    <td>长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值</td>
                                </tr></tbody></table>

                                    <p>旋转：</p><table>
                                    <thead>
                                    <tr><th>方法</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>rotate</td>
                                    <td>deg</td>
                                    <td>deg的范围-180~180，从原点顺时针旋转一个deg角度</td>
                                </tr><tr><td>rotateX</td>
                                    <td>deg</td>
                                    <td>deg的范围-180~180，在X轴旋转一个deg角度</td>
                                </tr><tr><td>rotateY</td>
                                    <td>deg</td>
                                    <td>deg的范围-180~180，在Y轴旋转一个deg角度</td>
                                </tr><tr><td>rotateZ</td>
                                    <td>deg</td>
                                    <td>deg的范围-180~180，在Z轴旋转一个deg角度</td>
                                </tr><tr><td>rotate3d</td>
                                    <td>(x,y,z,deg)</td>
                                    <td>同<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d" target="_blank">transform-function rotate3d</a></td>
                                </tr></tbody></table>

                                    <p>缩放：</p><table>
                                    <thead>
                                    <tr><th style="text-align:left">方法</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td style="text-align:left">scale</td>
                                    <td>sx,[sy]</td>
                                    <td>一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数</td>
                                </tr><tr><td style="text-align:left">scaleX</td>
                                    <td>sx</td>
                                    <td>在X轴缩放sx倍数</td>
                                </tr><tr><td style="text-align:left">scaleY</td>
                                    <td>sy</td>
                                    <td>在Y轴缩放sy倍数</td>
                                </tr><tr><td style="text-align:left">scaleZ</td>
                                    <td>sz</td>
                                    <td>在Z轴缩放sy倍数</td>
                                </tr><tr><td style="text-align:left">scale3d</td>
                                    <td>(sx,sy,sz)</td>
                                    <td>在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数</td>
                                </tr></tbody></table>

                                    <p>偏移：</p><table>
                                    <thead>
                                    <tr><th>方法</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>translate</td>
                                    <td>tx,[ty]</td>
                                    <td>一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。</td>
                                </tr><tr><td>translateX</td>
                                    <td>tx</td>
                                    <td>在X轴偏移tx，单位px</td>
                                </tr><tr><td>translateY</td>
                                    <td>ty</td>
                                    <td>在Y轴偏移tx，单位px</td>
                                </tr><tr><td>translateZ</td>
                                    <td>tz</td>
                                    <td>在Z轴偏移tx，单位px</td>
                                </tr><tr><td>translate3d</td>
                                    <td>(tx,ty,tz)</td>
                                    <td>在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px</td>
                                </tr></tbody></table>

                                    <p>倾斜：</p><table>
                                    <thead>
                                    <tr><th>方法</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>skew</td>
                                    <td>ax,[ay]</td>
                                    <td>参数范围-180~180；一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度；两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度</td>
                                </tr><tr><td>skewX</td>
                                    <td>ax</td>
                                    <td>参数范围-180~180；Y轴坐标不变，X轴坐标延顺时针倾斜ax度</td>
                                </tr><tr><td>skewY</td>
                                    <td>ay</td>
                                    <td>参数范围-180~180；X轴坐标不变，Y轴坐标延顺时针倾斜ay度</td>
                                </tr></tbody></table>

                                    <p>矩阵变形：</p><table>
                                    <thead>
                                    <tr><th>方法</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>matrix</td>
                                    <td>(a,b,c,d,tx,ty)</td>
                                    <td>同<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix" target="_blank">transform-function matrix</a></td>
                                </tr><tr><td>matrix3d</td>
                                    <td></td>
                                    <td>同<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d" target="_blank">transform-function matrix3d</a></td>
                                </tr></tbody></table>

                                    <h3 id="动画队列">动画队列</h3><p>调用动画操作方法后要调用 <code>step()</code> 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 <code>wx.createAnimation()</code> 一样的配置参数用于指定当前组动画的配置。</p><p><strong>示例：</strong></p><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">animation</span>=<span class="hljs-string">"{{animationData}}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></code></pre>
<pre><code class="lang-javascript">Page({
  data:{
    animationData:{}
  },
  onShow:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">var</span> animation = wx.createAnimation({
      duration:<span class="hljs-number">1000</span>,
        timingFunction:<span class="hljs-string">"ease"</span>,
    })

    <span class="hljs-keyword">this</span>.animation = animation

    animation.scale(<span class="hljs-number">2</span>,<span class="hljs-number">2</span>).rotate(<span class="hljs-number">45</span>).step();

    <span class="hljs-keyword">this</span>.setData({
      animationData:animation.export()
    })

    setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
      animation.translate(<span class="hljs-number">30</span>).step();
      <span class="hljs-keyword">this</span>.setData({
        animationData:animation.export()
      })
    }.bind(<span class="hljs-keyword">this</span>),<span class="hljs-number">1000</span>)
  },
  rotateAndScale: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// 旋转同时放大</span>
    <span class="hljs-keyword">this</span>.animation.rotate(<span class="hljs-number">45</span>).scale(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>).step()
    <span class="hljs-keyword">this</span>.setData({
      animationData:animation.export()
    })
  },
  rotateThenScale: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// 先旋转后放大</span>
    <span class="hljs-keyword">this</span>.animation.rotate(<span class="hljs-number">45</span>).step()
    <span class="hljs-keyword">this</span>.animation.scale(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>).step()
    <span class="hljs-keyword">this</span>.setData({
      animationData:animation.export()
    })
  },
  rotateAndScaleThenTranslate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// 先旋转同时放大，然后平移</span>
    <span class="hljs-keyword">this</span>.animation.rotate(<span class="hljs-number">45</span>).scale(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>).step()
    <span class="hljs-keyword">this</span>.animation.translate(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>).step({ duration: <span class="hljs-number">1000</span> })
    <span class="hljs-keyword">this</span>.setData({
      animationData:animation.export()
    })
  }
})</code></pre>


                                </section>

                            </div>
                            <div class="search-results">
                                <div class="has-results">

                                    <h1 class="search-results-title"><span class="search-results-count"></span> 个结果 "<span class="search-query"></span>"</h1>
                                    <ul class="search-results-list"></ul>

                                </div>
                                <div class="no-results">

                                    <h1 class="search-results-title">没有找到相关内容 "<span class="search-query"></span>"</h1>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="foot" id="footer">
                    <ul class="links ft">
                        <li class="links_item"><a href="">关于腾讯</a></li>
                        <li class="links_item"><a href="">服务协议</a></li>
                        <li class="links_item"><a href="">运营规范</a></li>
                        <li class="links_item"><a href="">辟谣中心</a></li>
                        <li class="links_item"><a href="">客服中心</a></li>
                        <li class="links_item"><a href="">联系邮箱</a></li>
                        <li class="links_item"><a href="">侵权投诉</a></li>
                        <li class="links_item">
                            <p class="copyright">Copyright © 2012-<span id="s_copyright_year"></span> Tencent. All Rights Reserved.</p>
                        </li>
                    </ul>
                </div>

            </div>



            <a href="ui-navigate.html" class="navigation navigation-prev " aria-label="Previous page: 导航">
                <i class="fa fa-angle-left"></i>
            </a>


            <a href="api-canvas.html" class="navigation navigation-next " aria-label="Next page: 绘图">
                <i class="fa fa-angle-right"></i>
            </a>



        </div>
    </div>


    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>


    <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>



    <script src="../../gitbook/gitbook-plugin-search/search.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>





</div></body></html>